<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由学习之嵌套路由</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>
<!-- 第一步导入vue和vuerouter js文件 -->

<body>
    <div id="app">
        <!-- 第二步申明router link标签 -->
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>

        <!-- 第三部 申明组件占位符 -->

        <router-view></router-view>
    </div>
    <script>
        // 第四步 创建组件
        var User = {
            template: `<h3>user</h3>`
        }


        // 路由的子路由
        var Tab1 = {
            template: `<h3>Tab1</h3>`
        }

        var Tab2 = {
            template: `<h3>Tab2</h3>`
        }

        // 子路由定义在父组件模板中
        var Register = {
            template: `
            <div>
                <h3>register</h3>
                <router-link to="/register/tab1">Tab1</router-link>
                <router-link to="/register/tab2">Tab2</router-link>
                <router-view></router-view>
            </div>
            `
        }

        // 第五步 创建vue router实例
        var router = new VueRouter({
            // 所有的路由规则定义处
            routes: [
                // 重定向到user路由处
                { path: '/', redirect: '/user' },
                {
                    path: '/user',
                    component: User
                },

                // 嵌套路由的使用 属性定义children 指明嵌套路由路径和组件对应对象
                {
                    path: '/register',
                    component: Register,
                    children: [
                        { path: '/register/tab1', component: Tab1 },
                        { path: '/register/tab2', component: Tab2 }
                    ]
                }]
        })


        // 第六步  挂载router实例对象到vue实例上
        var vm = new Vue({
            el: '#app',
            router: router,
            data: {
                msg: ''
            },
            methods: {},
        })
    </script>
</body>

</html>

<!-- 路由管理器实现路由 -->

<!-- ----------------------  -->

<!-- 注意创建vuerouter实例对象时定义的属性值是routes -->
<!-- 路由重定向 属性名 redirect属性 -->
<!-- 路由嵌套   属性定义关键字 children -->